<div th:fragment="html">
    <script>
        $(function(){
            var pid = getUrlParms("pid");
            var data4Vue = {
                uri:'foreproduct',
                p:'',
                firstProductimageId:0,
                pvs:[],
                reviews:[],
                showDetail:true,
                showReview:false,
                user:{name:'', password:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    linkDefaultActions();
                    this.load();
                },
                methods: {
                    load:function(){
                        var url =  this.uri+"/"+pid;
                        axios.get(url).then(function(response) {
                            var result = response.data;
                            vue.p=result.data.product;
                            vue.pvs=result.data.pvs;
                            vue.reviews=result.data.reviews;

                            vue.firstProductimageId = vue.p.firstProductimageId;
                            vue.$nextTick(function(){
                                imgAndInfoPageRegisterListeners(vue);
                            })
                        });

                    },
                    toggle2Detail:function(){
                        this.showDetail=true;
                        this.showReview=false;
                    },
                    toggle2Review:function(){
                        this.showDetail=false;
                        this.showReview=true;
                    }
                }
            });


        });
    </script>

    <title>模仿天猫官网 -- {{p.name}}</title>
    <div class="categoryPictureInProductPageDiv">
        <img v-if="p.cid!=null" class="categoryPictureInProductPage" :src="'img/category/'+p.cid+'.jpg'">
    </div>
    <div class="productPageDiv">
        <div th:replace="common/fore/product/imgAndInfo::html" ></div>
        <div th:replace="common/fore/product/productReview::html" ></div>
        <div th:replace="common/fore/product/productDetail::html" ></div>
    </div>
</div>
